<template>
  <el-dialog :title="title"
             :visible.sync="dialogData.show"
             center
             fullscreen
             @close="$emit('closedialog')">
    <el-form :model="form"
             label-position="right"
             label-width="120px">

      <el-form-item label="体检图片：">
        <img v-if="form.physicalExaminationDto"
             :src="form.physicalExaminationDto.imageUrl"
             alt=""
             srcset=""
             style="height:178px;width:178px;border:1px solid #999999;">
      </el-form-item>
      <el-form-item label="体检名称：">
        <el-form :inline="true"
                 :model="form"
                 class="demo-form-inline"
                 label-width="110px">
          <el-form-item label="">
            <p style='width:150px'
               v-if="form.physicalExaminationDto">{{form.physicalExaminationDto.name}}</p>
          </el-form-item>
          <el-form-item label="体检金额：">
            <p style='width:150px'>{{form.price}}</p>
          </el-form-item>
          <el-form-item label="适用人群：">
            <p style='width:150px'
               v-if="form.physicalExaminationDto">{{form.physicalExaminationDto.applicableThrong}}</p>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="体检人姓名：">
        <el-form :inline="true"
                 :model="form"
                 class="demo-form-inline"
                 label-width="110px">
          <el-form-item label="">
            <p style='width:150px'>{{form.userName}}</p>
          </el-form-item>
          <el-form-item label="性别：">
            <p style='width:150px'>{{form.sex == 1?'男':'女'}}</p>
          </el-form-item>
          <el-form-item label="联系电话：">
            <p style='width:150px'>{{form.phone}}</p>
          </el-form-item>
          <el-form-item label="身份证号：">
            <p style='width:150px'>{{form.idCard}}</p>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="订单编号：">
        <el-form :inline="true"
                 :model="form"
                 class="demo-form-inline"
                 label-width="110px">
          <el-form-item label="">
            <p style='width:150px'>{{form.orderNumber}}</p>
          </el-form-item>
          <el-form-item label="下单日期：">
            <p style='width:150px'>{{commonFunction.timestampFormat(new Date(form.createTime), 'yyyy-MM-dd hh:mm')}}</p>
          </el-form-item>
          <el-form-item label="预约体检时间：">
            <p style='width:150px'>{{form.reserveDate?form.reserveDate:'无'}}</p>

          </el-form-item>
          <el-form-item label="完成体检时间：">
            <p style='width:150px'>{{form.completeDate?form.completeDate:'未完成'}}</p>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-form :inline="true"
                 :model="form"
                 class="demo-form-inline"
                 label-width="110px">
          <el-form-item label="">
            <p style='width:150px'
               v-if="form.physicalExaminationBusinessDto">{{form.physicalExaminationBusinessDto.name}}</p>
          </el-form-item>
          <el-form-item label="发货状态：">
            <p :style="{width:'150px',color:form.status == 2 ? 'red':''}">{{form.status == 2 ? '待发货':'已发货'}}</p>
          </el-form-item>
        </el-form>
      </el-form-item>
    </el-form>
    <div class="borderTable">
      <p v-if="form.physicalExaminationDto">{{form.physicalExaminationDto.name}}</p>
      <p v-if="form.physicalExaminationDto">适用对象：{{form.physicalExaminationDto.applicableThrongNames.join(',')}}</p>
      <p v-if="form.physicalExaminationDto">
        <span v-for="it in form.physicalExaminationDto.supplement"
              :key="it">{{it+'  ,'}}</span>
      </p>
      <el-table :data="form.itemDtoList"
                style="width: 100%"
                border
                show-summary>
        <el-table-column prop="checkName"
                         label="检查项目"
                         width="200"></el-table-column>
        <el-table-column prop="significance"
                         label="临床意义"></el-table-column>
        <el-table-column prop="manPrice"
                         label="价格（男）"
                         width="100"></el-table-column>
        <el-table-column prop="womanPrice"
                         label="价格（女）"
                         width="100"></el-table-column>
      </el-table>

    </div>
    <div v-if="form.status == 3"
         style="margin-top:20px">
      <p style="font-size:18px">发货信息：</p>
      <el-form :inline="true"
               :model="form"
               class="demo-form-inline"
               label-width="110px">
        <el-form-item label="物流公司：">
          <p style='font-weight:normal;border:none;width:150px'>{{form.logisticName}}</p>
        </el-form-item>
        <el-form-item label="物流编号：">
          <p style='font-weight:normal;border:none;width:150px'>{{form.logisticsNumber}}</p>
        </el-form-item>
        <el-form-item label="确认发货时间：">
          <p style='font-weight:normal;border:none;width:150px'>{{form.confirmTime}}</p>
        </el-form-item>
      </el-form>
    </div>

    <div slot="footer"
         class="dialog-footer">
      <el-button @click="$emit('closedialog')">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ['dialogData'],
  data () {
    return {
      form: {},
      editObj: {
        imageUrl: null
      },
      tabledata: [{}],
      imageUploadUrl: this.api.appUpgradeUpload.url,
      radio: '',
      title: '体检订单详情'
    }
  },
  methods: {
    handleAvatarSuccess (res) {
      this.editObj.imageUrl = res.data;
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
  },
  mounted () {
    // this.form = this.dialogData.info
    this.post(this.api.cooperationHospital.getOrderDetail, { "orderId": this.dialogData.info.orderId }).then((res) => {
      this.form = res.data.object
      this.form.physicalExaminationDto.supplement = JSON.parse(this.form.physicalExaminationDto.supplement)
    });

  }
};
</script>

<style lang='scss'>
.borderTable {
  width: 60%;
  text-align: center;
  p {
    padding: 10px;
  }
  p:nth-child(1) {
    border: 1px solid #ebeef5;
    font-size: 18px;
    font-weight: bold;
  }
  p:nth-child(2),
  p:nth-child(3) {
    border: 1px solid #ebeef5;
    border-top: none;
  }
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
